<script setup>
import { Document, ChatLineSquare, Pointer, Edit } from '@element-plus/icons-vue'
</script>

<template>
  <div class="user-info">
    <div class="main">
      <div class="content">
        <div class="avatar">
          <el-avatar :size="100" :src="circleUrl" />
        </div>
        <div class="info">
          <span class="name">海风追潮汐</span>
          <div class="tags">
            <el-tag class="tag" v-for="tag in 3" :key="tag" color="transparent">前端程序</el-tag>
          </div>
        </div>
      </div>
      <el-button type="primary"
        ><el-icon class="el-icon--left"><Edit /></el-icon>编辑资料</el-button
      >
    </div>

    <!-- 作者的文章数据 -->
    <div class="data">
      <div class="data-item">
        <el-icon :style="{ color: '#3B82F6' }"><Document /></el-icon>
        <span class="title">文章数 100</span>
      </div>
      <div class="data-item">
        <el-icon :style="{ color: '#22C55E' }"><ChatLineSquare /></el-icon>
        <span class="title">评论数 100</span>
      </div>
      <div class="data-item">
        <el-icon :style="{ color: '#A855F7' }"><Pointer /></el-icon>
        <span class="title">获得点赞数 100</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .content {
      display: flex;
      gap: 16px;
      .avatar {
        display: flex;
        justify-content: center; // 水平居中
        align-items: center; // 垂直居中
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;

        .name {
          font-family: Roboto;
          font-size: 24px;
          font-weight: bold;
          line-height: 32px;
          letter-spacing: normal;
          color: #1f2937;
        }
      }

      .tag {
        height: auto;
        padding: 0 5px;
        border: none;
        border-radius: 0px;
        border-left: 1px solid #6b7280;
        color: #6b7280;
      }
    }
  }

  .data {
    display: flex;
    align-items: center;
    gap: 16px;
    .data-item {
      display: flex;
      align-items: center;
      font-size: 16px;
      gap: 8px;

      .title {
        font-size: 14px;
        font-weight: 600;
      }
    }
  }
}
</style>
